import React from "react";
import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router";
import "./index.css";
import axios from "axios";

export default function Login() {
  const navigate = useNavigate();
  const onFinish = (values) => {
    // console.log(values);
    axios
      .get(
        `http://localhost:5000/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`
      )
      .then((res) => {
        // return console.log(res.data);
        if (res.data.length === 0) {
          message.error("用户名或密码错误");
        } else {
          localStorage.setItem("token", JSON.stringify(res.data[0]));
          navigate("/");
          // message.success("登录成功");
        }
      })
      .catch((err) => {
        return console.log(err);
      });
  };
  return (
    <div style={{ background: "rgb(35,39,65)", height: "100%" }}>
      <div className="formContainer">
        <div className="loginTitle">新闻发布管理系统</div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "Please input your Username!" }]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "Please input your Password!" }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
